$name: #{'.' + $namespace + '-select'};

#{$name} {
  --select-background-color: var(--primary-stroke-color);
  --select-placeholder-color: #999;
  $z-index: #{calc($zIndex - 1)};
  $transition: .15s linear;
  border-radius: 16rpx;
  position: relative;

  @mixin z-index() {
    position: relative;
    z-index: $z-index;
    $z-index: #{calc($z-index - 1)};
  }

  #{$name}__content {
    @include z-index();
    height: 0px;
    position: absolute;
    top: calc(100% + 32rpx);
    background: var(--select-background-color);
    border-radius: inherit;
    transition: height $transition;
  }

  &__wrapper {
    display: flex;
    align-items: center;
    background: var(--select-background-color);
    border-radius: inherit;
    padding: 24rpx 32rpx;
  }

  &__selection {
    flex: auto;

    &-item {
      width: fit-content;
    }

    &-input {
      flex: auto;
      min-width: 24rpx;
    }
  }

  &__suffix {
    margin-left: 16rpx;
    &>.icon-arrow-down {
      transition: transform $transition;
    }
  }

  &__placeholder {
    color: var(--select-placeholder-color)
  }

  &__mask {
    @include z-index();
    position: fixed;
    @include locate();
  }

  .#{$namespace}-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24rpx 32rpx;
    color: var(--primary-shadow-color);

    .icon-select {
      visibility: hidden;
    }

    &.is-active {
      color: var(--primary-text-color);

      .icon-select {
        visibility: visible;
      }
    }
  }

  &.is-show {
    #{$name}__content {
      height: 400rpx;
    }

    #{$name}__suffix {
      &>.icon-arrow-down {
        transform: rotate(180deg);
      }
    }
  }

  &.is-fit-width {
    width: fit-content;
  }

  &.is-multiple {
    $margin: 8rpx;
    #{$name}__selection {
      display: flex;
      flex-wrap: wrap;
      margin: calc($margin * -1);

      &-item {
        display: flex;
        align-items: baseline;
        background: var(--info-background-color);
        padding: 0 16rpx;
        border-radius: 8rpx;
        font-size: 85%;
        margin: $margin;

        &>.iconfont {
          margin-left: 8rpx;
        }
      }
    }
  }

  &.is-disabled {
    --select-background-color: var(--disabled-background-color);
    color: var(--disabled-text-color);
    pointer-events: none;
  }
}